<!--
  Generated template for the AttendanceCardPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<extendheader title="生产统计">
  <button ion-button item-end icon-left class="left" (click)="back()">
    <ion-icon name="ios-arrow-back"></ion-icon>
    返回
  </button>
  <button ion-button class="right" ion-left (click)="goAnnual()">
    <ion-icon name="pie" style="margin-right:5px;"></ion-icon>
    年度
  </button>
</extendheader>
<ion-content>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="下拉加载" refreshingSpinner="circles" refreshingText="数据加载中...">
    </ion-refresher-content>
  </ion-refresher>
  <ion-grid class="modechange" *ngIf="lines && lines.length > 0">
    <ion-row>
      <ion-col [ngClass]="{active: tabindex == 0}" (click)="changeTimeType(0)">
        <button ion-button full>日统计</button>
      </ion-col>
      <ion-col [ngClass]="{active: tabindex == 1}" (click)="changeTimeType(1)">
        <button ion-button full>月统计</button>
      </ion-col>
    </ion-row>
    <ion-row class="timeandline">
      <ion-col col-7>
        <ion-item #sss class="lineselect">
          <ion-label>{{selectedLine.productionLineName}}</ion-label>
          <ion-select [(ngModel)]="selectedLine" [selectOptions]="{title:'产线选择',cssClass:'choseline'}" okText="确定" (ngModelChange)="changeline()" interface="Popover" cancelText="取消">
            <ion-option *ngFor="let line of lines" [value]="line">{{line.productionLineName}}</ion-option>
          </ion-select>
        </ion-item>
      </ion-col>
      <ion-col col-4>
        <ion-item color="light">
          <ion-datetime *ngIf="showOperationRate" doneText="完成" [max]="maxDate" cancelText="取消" [placeholder]="currentDate" [(ngModel)]="currentDate" displayFormat="YYYY-MM" (ionChange)="datechanged()"></ion-datetime>
          <ion-datetime *ngIf="!showOperationRate" doneText="完成" [max]="maxDate" cancelText="取消" [placeholder]="currentDate" [(ngModel)]="currentDate" displayFormat="YYYY-MM-DD" (ionChange)="datechanged()"></ion-datetime>
        </ion-item>
      </ion-col>
      <ion-col col-1>
        <ion-item>
          <ion-icon name="md-arrow-dropdown" style="color:#999;"></ion-icon>
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-list *ngIf="prolist && prolist.length > 0">
    <div class="gridlabel" *ngIf="topInfo">
      <div>
        <p>{{topInfo.count}}</p>
        <p>产量总量(件)</p>
      </div>
      <div>
        <p>{{topInfo.firstPassPercent}}</p>
        <p>直通率</p>
      </div>
      <div *ngIf="showOperationRate">
        <p>{{topInfo.operationRate}}</p>
        <p>开工率</p>
      </div>
    </div>
    <ion-item-divider color="light" style="background:none;" *ngIf="prolist && prolist.length > 0">各类型产品生产明细</ion-item-divider>
  </ion-list>
  <div *ngIf="prolist && prolist.length <= 3" style="background:#fff;">
    <div class="productdetails" *ngFor="let pro of prolist">
      <div class="producthead">
        <p>{{pro.productTypeName}}<span class="subtitle">生产总量</span><span class="titlenumber">{{pro.count | number:0}}</span></p>
      </div>
      <div class="productcontent">
        <div *ngFor="let proItem of pro.productsInfo">
          <p>{{proItem.productName}}</p>
          <p>生产量(件)<span>{{proItem.goodCount | number:0}}</span></p>
          <p>直通率(%)<span>{{proItem.firstPassPercent}}</span></p>
        </div>
      </div>
    </div>
  </div>
  <div *ngIf="prolist && prolist.length > 3" style="background:#fff;">
    <div *ngFor="let pro of prolist;let indx=index" style="margin: 0px" class="productdetails">
      <div class="producthead" style="display:flex;justify-content:space-between;align-items:center;" (click)="showAccordion(indx)">
        <p>{{pro.productTypeName}}<span class="subtitle">生产总量</span><span class="titlenumber">{{pro.count | number:0}}</span></p>
        <button ion-button clear color="dark">
          <ion-icon name="ios-arrow-down" item-right *ngIf="indx == temp"></ion-icon>
          <ion-icon name="ios-arrow-forward" item-right *ngIf="indx != temp"></ion-icon>
        </button>
      </div>
      <div class="productcontent" *ngIf="indx == temp">
        <div *ngFor="let proItem of pro.productsInfo">
          <p>{{proItem.productName}}</p>
          <p>生产量(件)<span>{{proItem.goodCount | number:0}}</span></p>
          <p>直通率(%)<span>{{proItem.firstPassPercent}}</span></p>
        </div>
      </div>
    </div>
  </div>
  <!-- <div style="height:15px;background:#eee;"></div> -->
  <ion-slides class="piearea" pager *ngIf="prolist && prolist.length > 0" style="background:#fff;" [ngClass]="{oneslide:prolist.length == 1}">
    <ion-slide *ngFor="let item of prolist; let i = index">
      <div *ngIf="item.defectInfo.length > 0" id="pie{{i}}"></div>
      <div *ngIf="item.defectInfo.length <= 0" id="pie{{i}}" style="padding-top:10px;">{{item.productTypeName}}暂无缺陷信息</div>
    </ion-slide>
  </ion-slides>
  <div *ngIf="prolist && prolist.length == 0" style="text-align:center;padding-top:20px;margin-top:90px;">
    <img src="./assets/imgs/nulldata.png" alt="没有找到相关数据">
    <p *ngIf="errMsg" style="font-size:20px;color:#d4d7dd;">{{errMsg}}</p>
    <p *ngIf="!errMsg" style="font-size:20px;color:#d4d7dd;">没有找到相关数据</p>
  </div>
</ion-content>
